<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery Finder</title>
<link rel="stylesheet" href="default.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link href="ui.finder-2.css" rel="stylesheet" media="screen,print" type="text/css">
<link rel="stylesheet" href="ui.theme.css" type="text/css" media="screen" title="no title" charset="utf-8">

<!--[if lt IE 8]>
	<link href="ui.finder.ie.css" rel="stylesheet" media="screen" type="text/css" />
<![endif]-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="jquery.scrollTo-1.4.0-min.js"></script>

<script type="text/javascript" src="ui.finder-2.js"></script>
<script type="text/javascript">
$(function(){


	$('<ol id="finder"/>')
		.prependTo('body')
		.finder({
		//	root_url: 'json_1.js',
			root_url: 'http://api.flickr.com/services/feeds/photos_public.gne?format=json&jsoncallback=?',
			ajax: {
				dataType: 'jsonp',
				dataFilter: function(value) {return eval(value);}
			},
			cache: true,
			retrieve_data: function(cycle) {
			//	console.error('RETRIEVE DATA',cycle)
				//return false;
				if(cycle.action === 'append') {
					cycle.data_target.find(this.settings.list_item_parent_node_type)
						.after('<p class="loading">Loading data...</p>')
					
					var page = cycle.data_target.data('paging') || 0;
					page += 10;
					cycle.data_target.data('paging',page);
					
					cycle.url = cycle.url.replace(/(\&get\=\d+)/,'$1&page='+page);
					
					cycle.data_target.scrollTo( 'p.loading' );
				}
			
				return cycle;
			},
			process_data : function(cycle) {
				
				console.error('process data',cycle.url)
				
				var d = eval(cycle.data_response);

				
				if(!d || !d.items){
					console.error("NO DATA",d.data_response);
					return false;
				}
				
				var r = [];
				$.each(d.items,function(i,item) {
					r.push('<li><a href="http://api.flickr.com/services/feeds/photos_public.gne?format=json&get='+Math.floor(Math.random()* new Date().valueOf() )+'&jsoncallback=?">'+item.title+'</a></li>')
					//r.push('<li><a href="json_1.js?'+new Date().valueOf()+'&jsoncallback=?">'+item.title+'</a></li>')
				});
				
			
				
				cycle.data_processed = $('<div/>').append('<p>'+cycle.id+'</p><ol>'+r.join('')+'</ol>');
				
				
				return cycle;
				
			},
			display_data: function(cycle) {
				
				var self = this;
				
				if(cycle.action === 'append') {
					
					var loading_par = cycle.data_target.find('p.loading'),
						new_items =  $(cycle.data_processed).find(self.settings.list_item_node_type) ;
					
					new_items.appendTo( cycle.data_target.find(self.settings.list_item_parent_node_type) )
					
					loading_par.remove()
						
					var first_item = new_items.eq( 0 );
					
					first_item.addClass('ui-state-highlight');
					
					cycle.data_target.scrollTo(first_item);
					
					cycle.end();
					
					self.trigger('custom_event',cycle);
					
					return false;
				}
				
				return cycle;
			},
			paging: true,
			root_ready: function(cycle) {
			//	console.warn(this,arguments)
				//$('#finder').finder('select',[1,20,40]);
				$('#finder').finder('select',1);
			},
			select: function(cycle) {
				
				if (cycle.action === 'open') {
					console.warn(cycle.url)
					return false // false ends the cycle and cycle's event continues as usuall (ie follow the link)
				}
				
			},
			events: {
				select: [
					function(cycle) {
				//		console.error('SELEEECY',cycle.action)
					}
				],
				custom_event: [
					function(cycle) {
				//		console.warn('my custom event ',cycle.id)
					}
				],
				init_after: [
					function(){
					//	console.error('after')
					}
				],
				retrieve_data_after: [
					function(cycle) { // preserve cache
						var cache_for_parent = this.cache[ cycle.url.replace(/\&page\=\d+/,'')];
						cache_for_parent && cache_for_parent.items
						&& (cache_for_parent.items = cache_for_parent.items.concat( cycle.data_response.items ))
					//	console.error('received data',cache_for_parent)
					}
				]
			}
		});
	
});
</script>
</head>
<body>
	
</body>
</html>